﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sticky Panel Example</title>
    <style type="text/css">
        body{ color:#ffffff; font-size:24px; }
        .BoxGlow_Grey2{
  	        box-shadow: 0 5px 15px rgba(176,176,176, 1);
            -webkit-box-shadow: 0 5px 15px rgba(176,176,176, 1); 
            -moz-box-shadow: 0 5px 15px rgba(176,176,176, 1);
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.stickyPanel.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            var stickyPanelOptions = {
                topPadding: 20,
                afterDetachCSSClass: "BoxGlow_Grey2",
                savePanelSpace: true,
                onDetached: function (detachedPanel, spacerPanel) {
                    detachedPanel.html(detachedPanel.html() + " has been detached!");
                    spacerPanel.css("background-color", "#1000ff");
                },
                onReAttached: function (detachedPanel) {
                    detachedPanel.html(detachedPanel.html().replace(" has been detached!", ""));
                },
                parentSelector: null
            };

            // multiple panel example (you could also use the class ".stickypanel" to select both)
            $("#Panel1,#Panel2").stickyPanel(stickyPanelOptions);

            $("#Panel3").stickyPanel(stickyPanelOptions);

            $("#UnstickPanel3").click(function () {
                $("#Panel3").stickyPanel("unstick");
            });

            stickyPanelOptions.parentSelector = "#AbsoluteDiv";
            $("#Panel4").stickyPanel(stickyPanelOptions);

            stickyPanelOptions.parentSelector = "#NormalDiv";
            $("#Panel5").stickyPanel(stickyPanelOptions);
        });
    </script>
</head>
<body>
    <div style="height:100px; background-color:Gray;">Header</div>
    <div style="margin-left:100px;">
        <div id="Panel1" class="stickypanel" style="height:80px; width:30%; background-color:Red; margin-right:5px;display:inline-block;">Stick Panel 1</div>
        <div id="Panel2" class="stickypanel" style="height:80px; width:390px; background-color:Red;display:inline-block;">Stick Panel 2</div>
    </div>
    <div style="margin-left:100px;height:1000px; width:800px; background-color:Green;">
        <h3 style="margin:0;">Table 1</h3>
        <div id="AbsoluteDiv" style="position:absolute; overflow:auto; width:300px; height:500px; background-color:#fff; margin-left:25px;">
            <span style="color:#000;">AbsoluteDiv</span>
            <button>Test 1</button>
            <button>Test 2</button>
            <div id="Panel4" style="background-color:Red; width:100px;height:200px;">Stick Panel 4</div>
            <div style="height:900px; width:400px;background-color:blue;">Space</div>
        </div>
        <div id="NormalDiv" style="overflow:auto; width:300px; height:500px; background-color:#fff; margin-left:425px;">
            <span style="color:#000;">NormalDiv</span>
            <button>Test 1</button>
            <button>Test 2</button>
            <div id="Panel5" style="background-color:Red; width:100px;height:200px;">Stick Panel 5</div>
            <div style="height:900px; width:400px;background-color:blue;">Space</div>
        </div>
    </div>
    <div id="Panel3" style="background-color:Red; width:200px;margin-left:900px;">Stick Panel 3</div>
    <div style="margin-left:100px;height:1000px; width:800px; background-color:Green;">Table 2</div>
    <button id="UnstickPanel3">Unstick Panel 3</button>
</body>
</html>
